<!--
 * @Version: 1.0
 * @Autor:
 * @Date: 2021-03-10 16:57:07
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-04-02 16:11:36
 * @Description:
-->
<template>
  <el-card class="app-container content_box" shadow="always">
    <div>
      <!-- title -->
      <div class="header_title_box">
        <h2>地址库管理</h2>
      </div>
      <div class="select_form_box">
        <div class="filter-container">
          <el-input v-model="queryParam.name" size="middle" placeholder="搜索城市" class="select250 mr16" @keyup.enter.native="handleSearch" />
          <!-- <el-select v-model="queryParam.status" size="middle" placeholder="请选择状态" class="search" clearable @change="handleSearch">
            <el-option v-for="(item, index) in option" :key="index" :value="item.value" :label="item.label" />
          </el-select> -->
          <el-button size="middle" type="primary" class="filter-item search" icon="el-icon-search" @click="handleSearch">
            搜索
          </el-button>
          <el-button size="middle" icon="el-icon-refresh" @click="handleRefresh">重置</el-button>
        </div>
        <div class="operation_button_box">
          <el-button v-action="'address@save'" icon="el-icon-circle-plus" size="middle" type="success" @click="handleCreate()">新增地址</el-button>
        </div>
      </div>
      <div v-loading="loading">
        <el-table ref="multipleTable" :data="data" tooltip-effect="dark" style="width: 100%" border fit @selection-change="handleSelectMulti">
          <el-table-column align="center" type="selection" width="55" />
          <el-table-column label="操作" align="center" fixed width="200px">
            <template slot-scope="scope">
              <span v-action="'address@update'" class="edit_style" @click="handleUpdateNew(scope.row)">编辑</span>
              <span v-action="'address@delete'" class="delete_style" @click="handleDelete(scope.row.id)">删除</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="城市" prop="city" />
          <el-table-column align="center" label="州" prop="state" />
          <el-table-column align="center" label="邮递区号" prop="area_code" />
          <el-table-column align="center" label="街道" prop="street" show-overflow-tooltip />
          <el-table-column align="center" prop="creator_name" label="创建人" />
          <el-table-column align="center" prop="created_at" label="创建时间" width="165" />
          <el-table-column align="center" prop="update_name" label="修改人">
            <template slot-scope="scope">
              {{ scope.row.update_name?scope.row.update_name:'-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="updated_at" label="更新时间" width="165" />
        </el-table>
        <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
      <!-------- 回到顶部 ------------>
      <el-backtop :visibility-height="60">
        <i class="el-icon-caret-top" />
      </el-backtop>
      <el-dialog :center="true" :title="title" :visible.sync="formVisible" width="750px" @close="handleCancel">
        <el-form :ref="formName" :model="formFieldsData" :rules="rules">
          <div class="header_title_box">
            <h2>地址信息</h2>
          </div>
          <el-form-item label="州" :label-width="formLabelWidth" prop="state">
            <el-select v-model="formFieldsData.state" filterable size="middle" placeholder="请选择州" class="search width500" clearable @change="changeState">
              <el-option v-for="(item, index) in optionState" :key="index" :value="item.id" :label="`${item.cname}(${item.name})`" />
            </el-select>
          </el-form-item>
          <el-form-item v-loading="loadingCity" label="城市" :label-width="formLabelWidth" prop="city">
            <el-select v-model="formFieldsData.city" filterable size="middle" placeholder="请选择城市" class="search width500" clearable @change="changecity">
              <el-option v-for="(item, index) in optionCityitem" :key="index" :value="item.id" :label="`${item.cname}(${item.name})`" />
            </el-select>
          </el-form-item>
          <el-form-item v-loading="loadingAreacode" label="邮政区号" :label-width="formLabelWidth" prop="area_code">
            <el-select v-model="formFieldsData.area_code" size="middle" placeholder="请选择邮政区号" class="search width500" clearable>
              <el-option v-for="(item, index) in optionAreacode" :key="index" :value="item.zip" :label="item.zip" />
            </el-select>
          </el-form-item>
          <el-form-item label="街道" :label-width="formLabelWidth" prop="street">
            <el-input v-model.trim="formFieldsData.street" size="mini" type="textarea" show-word-limit autocomplete="off" placeholder="请输入街道" clearable autosize class="width500" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer-center">
          <el-button @click="handleCancel">取 消</el-button>
          <el-button type="primary" @click="handleSubmitNew">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </el-card>

</template>

<script>
import formOperate from '@/layout/mixin/formOperate'
import {
  action
} from '@/directive/permission/index.js' // 权限判断指令
import { statesList, cityList, cityPostalCode } from '@/utils/publicData.js'
export default {
  name: 'BasicsAddress',
  directives: {
    action
  },
  mixins: [formOperate],
  data() {
    return {
      url: '/address',
      queryParam: {
        name: ''
      },
      option: [{
        value: 2,
        label: '禁用'
      },
      {
        value: 1,
        label: '启用'
      }
      ],
      optionState: [],
      optionCity: [],
      optionCityitem: [],
      optionAreacode: [],
      loadingAreacode: false,
      loading: false,
      formVisible: false,
      loadingCity: false,
      formFieldsData: {
        city: '', // 店铺编号
        state: '',
        area_code: '',
        street: ''
      },
      formName: 'addresss',
      formLabelWidth: '150px',
      rules: {
        city: [{ required: true, message: '请输入城市', trigger: 'blur' }],
        state: [{ required: true, message: '请输入州', trigger: 'blur' }],
        area_code: [{ required: true, message: '请输入邮政区号', trigger: 'blur' }],
        street: [{ required: true, message: '请输入街道', trigger: 'blur' }]
      }
    }
  },
  created() {
    statesList().then((data) => {
      this.optionState = data
    })
  },
  methods: {
    // 选择城市
    changecity(id) {
      const vm = this
      vm.loadingAreacode = true
      vm.formFieldsData.area_code = ''
      cityPostalCode(id).then((data) => {
        vm.optionAreacode = data
        vm.loadingAreacode = false
      })
    },
    // 选择州
    changeState(value) {
      const vm = this
      vm.loadingCity = true
      vm.formFieldsData.city = ''
      cityList(value).then((data) => {
        vm.optionCity = data
        vm.optionCityitem = data
        vm.loadingCity = false
      })
    },
    beforeCreate() {
      Object.keys(this.formFieldsData).forEach(k => {
        this.formFieldsData[k] = ''
      })
    },
    handleUpdateNew(data) {
      this.$http.get(`address/${data.id}`).then(res => {
        const dataObj = res.data
        this.formFieldsData = dataObj
        this.formVisible = true
      })
    },
    handleSubmitNew() {
      this.$refs['addresss'].validate((valid) => {
        if (valid) {
          // 编辑
          if (this.formFieldsData.id) {
            this.$http.put(`address/${this.formFieldsData.id}`, this.getData()).then(response => {
              if (response.code === 10000) {
                this.$message.success('编辑成功')
                this.formVisible = false
                this.handleRefresh()
              } else {
                this.$message.error(response.message)
              }
            })
          } else {
            // 判断个人信息
            this.$http.post('address', this.getData()).then(response => {
              if (response.code === 10000) {
                this.$message.success('添加成功')
                this.formVisible = false
                this.handleRefresh()
              } else {
                this.$message.error(response.message)
              }
            })
          }
        }
      })
    },
    // 获取添加参数组合
    getData() {
      const stateData = this.optionState.filter((arr) => {
        return arr.id === this.formFieldsData.state
      })
      const cityData = this.optionCity.filter((arr) => {
        return arr.id === this.formFieldsData.city
      })
      const data = {
        city: cityData.length > 0 ? cityData[0].name : '1001',
        city_code: cityData.length > 0 ? cityData[0].id : '1001',
        state: stateData.length > 0 ? stateData[0].cname : '1002',
        state_code: stateData.length > 0 ? stateData[0].code : '1002',
        area_code: this.formFieldsData.area_code,
        street: this.formFieldsData.street
      }
      return data
    }
  }
}

</script>

<style lang="scss" scoped>
.width500 {
  width: 500px !important;
}
</style>
